<div class="student_summary">
  {{>ui/shared/avatar/jst/_avatar.handlebars student}}

  <div id="course_info">
    <h3><a class="course_link" href="{{course.url}}">{{course.name}}</a></h3>
    <div class='students_box' />
  </div>

  <div>
    <h2><a class="student_link" href="{{student.html_url}}">{{student.name}}</a></h2>
    <table>
      <tr>
        <th>{{t "Current Total:"}}</th>
        <td class="current_score">{{student.current_score}}%</td>
        <td class="message_student">
          <a href="{{student.message_student_url}}"
             class="message_student_link"
             title="{{t "Message this student"}}">
            <img src="/images/email.png" alt="" />
          </a>
        </td>
      </tr>
    </table>
  </div>
</div>

<div class="grid-row end-xs">
  <div class="col-xs-2">
   <div class="AnalyticsToggle ic-Form-control">
     <label class="ic-Super-toggle--ui-switch">
       <input type="checkbox" id="graph_table_toggle" class="ic-Super-toggle__input" aria-label="{{t "View analytics data in tables instead of graphs" }}">
       <div class="ic-Super-toggle__container" aria-hidden="true">
         <div class="ic-Super-toggle__option--LEFT">
           <i class="icon-stats"></i>
         </div>
         <div class="ic-Super-toggle__switch"></div>
         <div class="ic-Super-toggle__option--RIGHT">
           <i class="icon-table"></i>
         </div>
        </div>
      </label>
   </div>
  </div>
</div>

<div class="student_graphs">
  <div class="legend_row">
    <h4>{{t "Activity by Date"}}</h4>
    <div class="graph_legend" aria-hidden="true">
      <span class="legend_entry"><span class="legend_swatch page_views"></span>{{t "Page Views Only"}}</span>
      <span class="legend_entry"><span class="legend_swatch participation"></span>{{t "Participation"}}</span>
    </div>
  </div>
  <div class="graph_container">
    <span id="participation-graph-label" class="screenreader-only">{{t "Graph of student page views and participation over time"}}</span>
    <div role="img" aria-labelledby="participation-graph-label">
      <div class="graph" id="participating-graph" aria-hidden="true"/>
    </div>
  </div>
  <div id="participating-table" style="display:none"/>

  <div class="legend_row">
    <h4>{{t "Communication"}}</h4>
    <div class="graph_legend" aria-hidden="true">
      <span class="legend_entry"><span class="legend_swatch student"></span>{{t "Student"}}</span>
      <span class="legend_entry"><span class="legend_swatch instructors"></span>{{t "Instructors"}}</span>
    </div>
  </div>
  <div class="graph_container">
    <span id="responsiveness-graph-label" class="screenreader-only">{{t "Timeline of messages between the student and instructors"}}</span>
    <div role="img" aria-labelledby="responsiveness-graph-label">
      <div class="graph" id="responsiveness-graph" aria-hidden="true"/>
    </div>
  </div>
  <div id="responsiveness-table" style="display:none"/>

  <div class="legend_row">
    <h4>{{t "Submissions"}}</h4>
    <div class="graph_legend" aria-hidden="true">
      <span class="legend_entry"><span class="legend_swatch shape circle"></span>{{t "On Time"}}</span>
      <span class="legend_entry"><span class="legend_swatch shape triangle"></span>{{t "Late"}}</span>
      <span class="legend_entry"><span class="legend_swatch shape square"></span>{{t "Missing"}}</span>
      <span class="legend_entry"><span class="legend_swatch shape opencircle"></span>{{t "Future"}}</span>
    </div>
  </div>
  <div class="graph_container">
    <span id="assignment-finishing-graph-label" class="screenreader-only">{{t "Timeline showing when assignments were turned in"}}</span>
    <div role="img" aria-labelledby="assignment-finishing-graph-label">
      <div class="graph" id="assignment-finishing-graph" aria-hidden="true"/>
    </div>
  </div>
  <div id="assignment-finishing-table" style="display:none"/>

  <div class="legend_row">
    <h4>{{t "Grades"}}</h4>
    <div class="graph_legend" aria-hidden="true">
      <span class="legend_entry"><span class="legend_swatch sa totalRange outlined"><span></span></span>{{t "Total Range"}}</span>
      <span class="legend_entry"><span class="legend_swatch sa pc25-75"></span>{{t "25th-75th Percentile"}}</span>
      <span class="legend_entry"><span class="legend_swatch sa median outlined"><span></span></span>{{t "Median"}}</span>
      <span class="legend_entry"><span class="legend_swatch shape circle"></span>{{t "Good Score"}}</span>
      <span class="legend_entry"><span class="legend_swatch shape triangle"></span>{{t "Fair Score"}}</span>
      <span class="legend_entry"><span class="legend_swatch shape square"></span>{{t "Poor Score"}}</span>
    </div>
  </div>
  <div class="graph_container">
    <span id="grades-graph-label" class="screenreader-only">{{t "Chart of the student's grades on each assignment"}}</span>
    <div role="img" aria-labelledby="grades-graph-label">
      <div class="graph" id="grades-graph" aria-hidden="true"/>
    </div>
  </div>
  <div id="grades-table" style="display:none"/>

</div>
